<style lang="scss">
    .scoped-home{

        .tab-center{
            .el-tabs__nav-scroll{
                text-align: center;
                >.el-tabs__nav{
                    float: none;
                    display: inline-block;
                }
            }
        }
        .tab-white{
            .el-tabs__header{
                border-bottom: 0;
            }
            .el-tabs__item{
                color: #fff;
                font-size: 18px;
            }
            .el-tabs__active-bar{
                background-color: #fff;
            }
        }
        .grey-box{
            text-align: center;
            >*{
                margin-bottom: 10px;
            }
            img{
                height: 40px;
            }
        }

        .coupon{
            .tag{
                border-right:1px dashed #eee;
            }
            .gap{
                width: 1rem !important;
                height: 1rem !important;
            }
            .coupon-label{
                color:#ff6c00;
                font-size: 21px;
            }
            .coupon-time{
                color:#999;
            }
        }
    }
</style>
<template>
    <div class="scoped-home scroll h-100 pt10">
        <!-- 拼图 -->
        <banner :banner="banner" :imgs="topPic" ></banner>

        <!-- 测评排行 -->
        <div class="flex ui-center-width">
            <!-- 排行分类 -->
            <evaluaGroup></evaluaGroup>

            <!-- 最新测评 -->
            <evaluaNew></evaluaNew>
        </div>

        <!-- 最新视屏 -->
        <publishVedio></publishVedio>

        <!-- 彩金宝 -->
        <div class=" pb20 bg-orange">
            <div class="text-center f36 p20 f-color-white">彩金宝</div>
            <el-tabs v-model="couponTab" class="tab-center tab-white">
                <el-tab-pane v-for="g in couponGroup" :key="g.title" :label="g.title" :name="g.title" class="flex flex-wrap ui-center-width">

                    <ui-empty v-if="g.data" :data="g.data" class="auto-center"></ui-empty>

                    <coupon v-for="item in g.data" :key="item.id" color="#fff" :data="item" @click.native="linkCouponDeatils(item.id)"
                    gapColor="#ff6c00" style="width:400px;height:106px" class="ml15"></coupon>

                </el-tab-pane>
            </el-tabs>
        </div>

        <!-- 说事 -->
        <div class="mt50 pb20">
            <div class="text-center f36 p20">大虎说事</div>
            <el-tabs v-model="articleTab" class="tab-center">
                <el-tab-pane v-for="g in articleGroup" :key="g.title" :label="g.title" :name="g.title" class="flex flex-wrap ui-center-width">

                    <ui-empty v-if="g.data" :data="g.data" class="auto-center"></ui-empty>

                        <div v-for="item in g.data" :key="item.id" @click="linkArticlesDetails(item.id)"
                        class="flex cursor-pointer ui-hover-shadow mb20 mr10 ml10 bg-white ui-border" style="width:48%">

                            <ui-img v-if="item.smeta" :url="item.smeta.thumb" style="width:180px;height:140px"></ui-img>
                            <div class="flex-1 ml15 flex column column-col-center">
                                <div>
                                    <div class="f18 mb15">{{item.post_title}}</div>
                                    <div class="flex row-between mb15">
                                        <div class="flex col-center">
                                            <ui-img v-if="item.smeta" :url="item.smeta.thumb" size="30px" class="bg-grey ui-circle"></ui-img>
                                            <span class="ml5">{{item.user_nicename || item.user_login || '匿名用户'}}</span>
                                            <span class="ml20 f10 f-color-grey">{{item.show_time}}</span>
                                        </div>
                                        <div class="f10 flex opacity-06 mr20">
                                            <div class="mr10 flex col-center">
                                                <img src="~@/icons/comment3.png" style="width:15px;height:15px" class="mr5">
                                                {{item.post_like}}
                                            </div>
                                            <div class=" flex col-center">
                                                <icon name="star-o" class="mr5"></icon> {{item.favorite_num}}
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div class="f-color-text clamp-4">{{item.post_excerpt}}</div> -->
                                </div>
                                <div class="text-right f-color-blue">{{item.post_mime_type}}</div>
                            </div>

                        </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <!-- 媒体报道 -->
        <news></news>

        <!-- 统计区域 -->
        <tongji></tongji>

        <ui-footer></ui-footer>

    </div>
</template>
<script>
    import coupon from '@/views/coupon-home'
    import tongji from '@/views/home/统计区域'
    import publishVedio from '@/views/home/最新视频'
    import news from '@/views/home/媒体报道'
    import evaluaGroup from '@/views/home/测评排行分类'
    import evaluaNew from '@/views/home/最新测评'
    import banner from '@/views/banner'
    export default {
        components:{
            coupon,
            tongji,
            publishVedio,
            news,
            evaluaGroup,
            evaluaNew,
            banner
        },
        data(){
            return {
                banner:[],
                topPic:[],

                couponTab:'最新',
                couponGroup:[
                    { title:'最新', color:'#cc8bf7', },
                    { title:'白菜', color:'#3db96d', coupon_type:'1', search_field:'coupon_type', search_value:'1'},
                    { title:'提款最多', color:'#20a0ff', order_field: 'withdraw_num', },
                    { title:'流水最低', color:'#d9534f', order_field: 'multiple', order_type:'asc', },
                ],
                articleTab:'最新',
                articleGroup:[
                    { title:'最新', color:'#cc8bf7', cid:'7'},
                    { title:'说事', color:'#cc8bf7', cid:'11'},
                    { title:'爆料', color:'#20a0ff', cid:'12'},
                    { title:'内幕', color:'#3db96d', cid:'13'},
                    { title:'一本道', color:'#d9534f', cid:'14'},
                ],

            }
        },
        methods:{
            linkCouponDeatils(id){
                this.$router.push({
                    name:'彩金详情',
                    query:{
                        id:id
                    }
                })
            },
            linkArticlesDetails(id){
                this.$router.push({
                    name:'说事-文章详情',
                    query:{
                        id:id
                    }
                })
            },
        },
        mounted(){
            // 轮播图
            this.$http.get('index.php?g=home&m=Slide&a=slide_banner',{
                params:{
                    cate_id: 5
                }
            }).then(({data}) => {
                // console.log('轮播图:', data);
                this.banner = data.data
                if (data.code===1) {
                    this.banner = data.data
                }
            })

            // 顶部拼图
            this.$http.get('index.php?g=home&m=index&a=top_index_banner', {
                params:{

                }
            })
            .then(({data})=>{
                console.log('顶部拼图',data)
                if (data.code===1) {
                    let d = data.data
                    this.topPic = [  d.top_banner[0],d.top_banner[1],d.reco_banner[0]  ]
                }
            })


            // 彩金
            this.couponGroup.forEach((item)=>{
                this.$http.get('index.php?g=home&m=GameCoupon&a=coupon_list', {
                    params:{
                        page_size: 9,
                        order_field: item.order_field,
                        order_type: item.order_type,
                        search_field:item.search_field,
                        search_value:item.search_value,
                    }
                })
                .then(({data})=>{
                    if (data.code===1) {
                        this.$set(item, 'data', data.data)
                    }
                })
            })

            // 文章
            this.articleGroup.forEach((item) => {
                this.$http.get('index.php?g=home&m=content&a=sql_posts_paged', {
                    params:{
                        cid: item.cid,
                        page_size:6
                    }
                })
                .then(({data})=>{
                    // console.log('说事-',item.title, data)
                    if (data.code===1) {
                        this.$set(item, 'data', data.data)
                    }
                })
            })


        },
    }
</script>
